<template>
    <t-adaptive-page :opts="opts" @submit="conditionEnter" isCopy :table="state.table" :columns="state.table.columns"
      @selection-change="selectionChange" @size-change="handlesSizeChange" @page-change="handlesCurrentChange"
      show-summary :summary-method="getSummaries" height="600">
      <template #operName="{ scope }">{{ scope.row.operName }}</template>
    </t-adaptive-page>
  </template>
  
  <script setup lang="tsx" name="Portal">
  import tableData from "./tableData.json"
  
  const state: any = reactive({
    queryData: {
      invoiceCode: null, // 发票代码
      businessType: null, // 业务类型
      invoiceStatus: null, // 发票状态
      invoiceType: null, // 发票类型
      ticketType: null, // 种类票种
      certificationStatus: null, // 认证状态
      invoiceDate: null, // 开票日期
      certificationDate: null, // 认证日期
      totalTaxPrice: null, // 价税合计
      department: null, // 部门
      project: null, // 项目
      documentStatus: null // 单据状态
    },
    table: {
      currentPage: 1,
      pageSize: 20,
      total: 0,
      firstColumn: [{ type: "selection", fixed: true }, { type: "index", label: "序列", fixed: true }],
      // 接口返回数据
      data: [],
      // 表头数据
      columns: [
        {
          prop: "codeNum",
          label: "执行科室名称",
          minWidth: 130,
          fixed: false,
          sort: true,
          renderHeader: (row: any) => {
            return (
              <span class="label-title">
                <span class="label">{row.label}</span>
                <div class="caret-wrapper arrow">
                  <el-icon
                    style={{ color: row.fixed ? "#1890ff" : "#888888" }}
                    onClick={(event:any) => {
                      handleClick(row);
                      event.stopPropagation();
                    }}
                  >
                    {row.fixed ? <Lock /> : <Unlock />}
                  </el-icon>
                </div>
              </span>
            )
          }
        },
        { prop: "purchaser-name", label: "检查报告类型（CT\MR\DR\彩超）", minWidth: 210 },
        { prop: "name", label: "检查项目", minWidth: 210 },
        { prop: "kind", label: "检查部位", minWidth: 130 },
        { prop: "date", label: "上传时间", minWidth: 130, fixed: false },
      ]
    },
    selectTable1: {
      data: [
        { id: 1, num: 1, code: 1001, name: "库存现金", loan: "借", type: "资产" },
        { id: 2, num: 2, code: 1002, name: "银行存款", loan: "借", type: "资产" },
        { id: 3, num: 3, code: 1003, name: "其他货币资金", loan: "借", type: "资产" },
        { id: 4, num: 4, code: 1004, name: "短期投资", loan: "借", type: "资产" }
      ],
      columns: [
        { label: "序号", width: "60px", prop: "num" },
        { label: "科目编码", width: "80px", prop: "code" },
        { label: "科目名称", width: "200px", prop: "name" },
        { label: "方向", width: "60px", prop: "loan" },
        { label: "科目类别", width: "80px", prop: "type" }
      ]
    },
    listTypeInfo: {
      invoiceStatus: [
        { label: "销项税发票", key: "W1" },
        { label: "进项税发票", key: "W2" }
      ]
    }
  })
  
  const opts = computed(() => {
    return {
    invoiceDate: {
        label: "起止年月",
        comp: "t-date-picker",
        span: 2,
        bind: {
          type: "daterange"
        }
      },
      ticketType: {
        label: "执行科室",
        comp: "t-select",
        defaultVal: "W1",
        isSelfCom: true,
        bind: {
          optionSource: state.listTypeInfo.invoiceStatus
        }
      },
      businessType: {
        label: "报告类型",
        comp: "t-select-table",
        isSelfCom: true,
        bind: {
          isKeyup: true,
          maxHeight: 400,
          keywords: { label: "name", value: "id" },
          isShowFirstColumn: false,
          table: state.selectTable1,
          columns: state.selectTable1.columns,
          "show-summary": false
        },
        eventHandle: {
          radioChange: (val: any) => radioChange(val)
        }
      }
    }
  })
  const radioChange = (row: any) => {
    console.log("下拉选择表格-单选", row.name)
    state.queryData.businessType = row.name
  }
  // 最终参数获取
  const getQueryData = computed(() => {
    const { invoiceCode, businessType, invoiceStatus, invoiceType, ticketType, certificationStatus, invoiceDate, certificationDate, totalTaxPrice, department, project, documentStatus } = toRefs(state.queryData)
    return {
      invoiceCode: invoiceCode.value,
      businessType: businessType.value,
      invoiceStatus: invoiceStatus.value,
      invoiceType: invoiceType.value,
      ticketType: ticketType.value,
      certificationStatus: certificationStatus.value,
      invoiceBeginDate: invoiceDate.value && invoiceDate.value[0] ? invoiceDate.value[0] : null,
      invoiceEndDate: invoiceDate.value && invoiceDate.value[1] ? invoiceDate.value[1] : null,
      certificationBeginDate: certificationDate.value && certificationDate.value[0] ? certificationDate.value[0] : null,
      certificationEndDate: certificationDate.value && certificationDate.value[1] ? certificationDate.value[1] : null,
      totalTaxPrice: totalTaxPrice.value,
      department: department.value,
      project: project.value,
      documentStatus: documentStatus.value,
      pageNum: state.table.currentPage,
      pageSize: state.table.pageSize
    };
  })
  // 点击表头固定按钮
  function handleClick(row: any) {
    row.fixed = !row.fixed
  }
  // 点击查询按钮
  const conditionEnter = (data: any) => {
    state.queryData = data
    console.log("最终参数", getQueryData.value)
    getData()
  }
  // 复选框选中
  const selectionChange = (data: any[]) => {
    console.log("复选框选中", data)
    state.ids = data.map((item: { operId: any }) => item.operId)
  }
  // 页面大小
  const handlesSizeChange = (val: any) => {
    state.table.pageSize = val
    getData()
  }
  // 页码
  const handlesCurrentChange = (val: any) => {
    state.table.currentPage = val
    getData()
  }
  // 获取表格数据
  const getData = async () => {
    let res = await tableData
    if (res.success) {
      state.table.data = res.table.data.slice((state.table.currentPage - 1) * state.table.pageSize, state.table.pageSize * state.table.currentPage)
      state.table.total = res.table.data.length
    }
  }
  
  const getSummaries = (param: any) => {
    console.log('param', param)
    const { columns, data } = param
    const res = tableData
    const sums: any[] = [];
    columns.forEach((column: any, index: any) => {
      if (index === 0) {
        sums[index] = "总价";
        return;
      }
      const values = res.table.data.map((item: any) => Number(item[column.property]))
      if (
        column.property === "sum" ||
        column.property === "tax" ||
        column.property === "total"
      ) {
        const totalValue = values.reduce((prev, curr) => {
          const value = Number(curr);
          if (!isNaN(value)) {
            return prev + value;
          } else {
            return prev;
          }
        }, 0);
        sums[index] = totalValue
          .toFixed(2)
          .toString()
          .replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, "$&,")
      } else {
        sums[index] = ""
      }
    });
    return sums
  }
  
  onMounted(() => {
    getData()
  })
  </script>